<template>
  <div>
    <Topbar />
    <div id="app">
      <!-- 轮播图 -->
      <div id="_j_mfw_focus" class="mfw-focus">
        <div class="show-slider" style="height: 450px">
          <ul class="show-image">
            <li
              v-for="(item, index) in BannersArr"
              :key="index"
              data-id="0"
              class="show_image first"
              v-show="listIndex === index"
            >
              <a
                href="./traveldetail.html?id=5e3bf6a93f050000ff0035ec"
                class="show-pic"
                ><img :src="item.coverUrl"
              /></a>
              <a href="javascript:void(0);" class="show-title dark">
                <div class="date"><span class="day">15</span>/Oct.2020</div>
                <h3>{{ item.title }}</h3>
              </a>
            </li>
          </ul>
          <ul class="show-nav">
            <li
              :class="listIndex === index ? 'show_nav active' : 'show_nav'"
              v-for="(item, index) in BannersArr"
              :key="index"
              @click="changePage(index)"
            >
              <a href="javascript:"
                ><img :src="item.coverUrl" height="62" width="110" />
                <span></span
              ></a>
            </li>
          </ul>
          <a target="_blank" href="javascript:void(0);" class="show-more"
            >历历在目</a
          >
        </div>
        <div id="_j_index_search" class="search-container">
          <div class="search-group">
            <div id="_j_index_search_tab" class="searchtab">
              <ul class="clearfix">
                <li data-index="-1" class="tab-selected"><i></i>全部</li>
                <li data-index="0"><i></i>目的地</li>
                <li data-index="1"><i></i>攻略</li>
                <li data-index="2"><i></i>游记</li>
                <li data-index="3"><i></i>找人</li>
              </ul>
            </div>
            <div id="_j_index_search_bar_all" class="searchbar">
              <div class="search-wrapper">
                <div class="search-input">
                  <input
                    name="keyword"
                    id="keyword"
                    type="text"
                    placeholder="搜目的地/攻略/游记/用户"
                    autocomplete="off"
                  />
                </div>
              </div>
              <div id="_j_index_search_btn_all" class="search-button">
                <a role="button" href="javascript:"
                  ><i class="icon-search"></i
                ></a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="mfw-container clearfix">
        <div class="sales-entrys-container clearfix">
          <a
            href="javascript:void(0);"
            class="sales-entrys-item entrys-bg-sales"
          >
            <div class="sales-entrys-title">自由行</div>
            <div class="sales-entrys-subtitle">旅行就要freestyle</div>
          </a>
          <a
            href="javascript:void(0);"
            class="sales-entrys-item entrys-bg-group"
          >
            <div class="sales-entrys-title">跟团游</div>
            <div class="sales-entrys-subtitle">省心省力 行程透明</div>
          </a>
          <a
            href="javascript:void(0);"
            class="sales-entrys-item entrys-bg-localdeals"
          >
            <div class="sales-entrys-title">当地游</div>
            <div class="sales-entrys-subtitle">最地道的玩法体验</div>
          </a>
          <a
            href="javascript:void(0);"
            class="sales-entrys-item entrys-bg-flight"
          >
            <div class="sales-entrys-title">机票</div>
            <div class="sales-entrys-subtitle">特惠一折起</div>
          </a>
          <a
            href="javascript:void(0);"
            class="sales-entrys-item entrys-bg-visa"
          >
            <div class="sales-entrys-title">签证</div>
            <div class="sales-entrys-subtitle">服务优质 出签率高</div>
          </a>
          <a
            href="javascript:void(0);"
            class="sales-entrys-item entrys-bg-ship"
          >
            <div class="sales-entrys-title">邮轮</div>
            <div class="sales-entrys-subtitle">移动的海上城堡</div>
          </a>
        </div>
        <div class="mfw-wrapper">
          <div class="mfw-travelnotes">
            <div class="navbar clearfix">
              <ul id="_j_tn_nav" class="tn-nav">
                <li :class="isShow?'_j_gs_tab tn-nav-hot active':'_j_gs_tab tn-nav-hot'" @click="hotChange">
                  <a href="javascript:void(0);">热门游记</a>
                </li>
                <li :class="isShow?'_j_gs_tab tn-nav-new':'_j_gs_tab tn-nav-new active'" @click="newChange">
                  <a href="javascript:void(0);">最新发表</a>
                </li>
              </ul>
              <div class="tn-write">
                <a href="javascript:void(0);" class="btn-add"><i></i>写游记</a>
              </div>
            </div>
            <div class="pagelet-block">
              <form method="post" id="searchForm">
                <input
                  type="hidden"
                  name="orderType"
                  value="1"
                  id="orderType"
                />
                <div id="_j_tn_content">
                  <div class="tn-list">
                    <div
                      class="tn-item clearfix"
                      v-for="(item,index) in HotTravels"
                      :key="index"
                    v-show="isShow">
                      <div class="tn-image">
                        <a href="javascript:void(0);" target="_blank"
                          ><img :src="item.coverUrl" style="display: inline"
                        /></a>
                      </div>
                      <div class="tn-wrapper">
                        <dl>
                          <dt>
                            <a
                              href="./traveldetail.html?id=5e3bf6a93f050000ff0035e5"
                              target="_blank"
                              >{{ item.title }}</a
                            >
                          </dt>
                          <dd class="text">
                            <a
                              href="./traveldetail.html?id=5e3bf6a93f050000ff0035e5"
                              target="_blank"
                            >
                              {{ item.summary }}
                            </a>
                          </dd>
                        </dl>
                        <div class="tn-extra">
                          <span class="tn-ding"
                            ><a
                              href="javascript:void(0);"
                              data-japp="articleding"
                              data-iid="12451790"
                              data-vote="2157"
                              rel="nofollow"
                              class="btn-ding"
                            ></a>
                            <em id="topvote12451790">{{item.thumbsupnum}}</em></span
                          >
                          <span class="tn-place"
                            ><i></i>
                            <a
                              href="javascript:void(0);"
                              rel="nofollow"
                              class="_j_gs_item"
                            >
                              {{item.destName}}</a
                            >,by
                          </span>
                          <span class="tn-user"
                            ><a
                              href="javascript:void(0);"
                              target="_blank"
                              rel="nofollow"
                              ><img src="../assets/images/default.jpg" />
                              dafei
                            </a></span
                          >
                          <span class="tn-nums"><i></i>{{item.viewnum}}/{{item.replynum}}</span>
                        </div>
                      </div>
                    </div>  
                    <div
                      class="tn-item clearfix"
                      v-for="item in HotTravels"
                      :key="item.id"
                       v-show="!isShow"
                    >
                      <div class="tn-image">
                        <a href="javascript:void(0);" target="_blank"
                          ><img :src="item.coverUrl" style="display: inline"
                        /></a>
                      </div>
                      <div class="tn-wrapper">
                        <dl>
                          <dt>
                            <a
                              href="./traveldetail.html?id=5e3bf6a93f050000ff0035e5"
                              target="_blank"
                              >{{ item.title }}</a
                            >
                          </dt>
                          <dd class="text">
                            <a
                              href="./traveldetail.html?id=5e3bf6a93f050000ff0035e5"
                              target="_blank"
                            >
                              {{ item.summary }}
                            </a>
                          </dd>
                        </dl>
                        <div class="tn-extra">
                          <span class="tn-ding"
                            ><a
                              href="javascript:void(0);"
                              data-japp="articleding"
                              data-iid="12451790"
                              data-vote="2157"
                              rel="nofollow"
                              class="btn-ding"
                            ></a>
                            <em id="topvote12451790">{{item.thumbsupnum}}</em></span
                          >
                          <span class="tn-place"
                            ><i></i>
                            <a
                              href="javascript:void(0);"
                              rel="nofollow"
                              class="_j_gs_item"
                            >
                              {{item.destName}}</a
                            >,by
                          </span>
                          <span class="tn-user"
                            ><a
                              href="javascript:void(0);"
                              target="_blank"
                              rel="nofollow"
                              ><img src="../assets/images/default.jpg" />
                              dafei
                            </a></span
                          >
                          <span class="tn-nums"><i></i>{{item.viewnum}}/{{item.replynum}}</span>
                        </div>
                      </div>
                    </div>

                  </div>
                  <br /><br />
                  <div style="float: right">
                    <div style="float: left">
                      <span style="line-height: 30px">
                        共2页 / 16条&nbsp;&nbsp;&nbsp;</span
                      >
                    </div>
                    <div
                      id="pagination"
                      class="jq-pagination"
                      style="display: inline"
                    >
                      <a
                        class="prev disabled"
                        href="javascript:void(0);"
                        jp-role="prev"
                        jp-data="0"
                        >上一页</a
                      ><a
                        href="javascript:void(0);"
                        jp-role="page"
                        jp-data="1"
                        class="active"
                        >1</a
                      ><a href="javascript:void(0);" jp-role="page" jp-data="2"
                        >2</a
                      >
                      <a
                        class="next"
                        href="javascript:void(0);"
                        jp-role="next"
                        jp-data="2"
                        >下一页</a
                      ><a
                        class="last"
                        href="javascript:void(0);"
                        jp-role="last"
                        jp-data="2"
                        >尾页</a
                      >
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="mfw-aside">
          <div class="asidebox safety-prevention">
            <a
              href="javascript:void(0);"
              style="display: block; margin-top: 5px"
              ><img
                src="../assets/images/index-link.png"
                width="218"
                height="31"
            /></a>
          </div>
          <div class="asidebox box-gonglve">
            <div class="asidebox-hd">
              <h2 class="hd-title">旅游攻略推荐</h2>
              <a href="./strategy_index.html" class="hd-right">更多</a>
            </div>
            <div class="asidebox-bd">
              <div class="gonglve-item">
                <div class="img">
                  <a href="javascript:void(0);"
                    ><img
                      width="200px"
                      src="../assets/images/wKgE2l0chlCATLEFAA8R6jYHC0U155.jpg"
                    /><span class="mark">自由行攻略</span></a
                  >
                </div>
                <h3><a href="javascript:void(0);">广州长隆野生动物园</a></h3>
              </div>
            </div>
          </div>
          <div class="m-hotsale">
            <h3 class="hd">本周热卖</h3>
            <ul>
              <li>
                <a href="javascript:void(0);" target="_blank"
                  ><span class="image"
                    ><img
                      src="../assets/images/wKgIC1xOo6iAS0mlABAmBVFn6AA539.gif"
                      height="70"
                      width="100"
                  /></span>
                  <div
                    title="最高立减800·上海飞马尔代夫鲁滨逊努努岛7天蜜月自由行（一价全包+私人泳池+儿童吃住优惠+婚纱摄影+可预订奥静/努努岛/中央格兰宁/康迪玛）"
                    class="title"
                  >
                    最高立减800·上海飞马尔代夫鲁滨逊努努...
                  </div>
                  <span class="price">¥11880起</span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);" target="_blank"
                  ><span class="image"
                    ><img
                      src="../assets/images/wKgED1vzqwOAAsFFAAL1lFyHgLg47.jpeg"
                      height="70"
                      width="100"
                  /></span>
                  <div
                    title="【五月美食节】上海出发塞班岛6天5晚自由行(早鸟优惠最高减500元+金卡会员立减500元+赠环岛游+军舰岛+接送机+可升级丛林探险+双重套餐不同选择+含税费1550元+导游小费+中文接送机 )"
                    class="title"
                  >
                    【五月美食节】上海出发塞班岛6天5晚自...
                  </div>
                  <span class="price">¥3180起</span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);" target="_blank"
                  ><span class="image"
                    ><img
                      src="../assets/images/wKgBEFsscoCAVoO2AAOWOCBnxfs33.jpeg"
                      height="70"
                      width="100"
                  /></span>
                  <div
                    title="ins网红拍照圣地·上海直飞美娜多5天自由行(网红无边泳池+布纳肯海龟合照+可考潜水证+深潜教学+追海豚+滑翔伞)"
                    class="title"
                  >
                    ins网红拍照圣地·上海直飞美娜多5天自...
                  </div>
                  <span class="price">¥3280起</span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);" target="_blank"
                  ><span class="image"
                    ><img
                      src="../assets/images/wKgED1uQ-eOAMAiMAAU0ehvmPqA28.jpeg"
                      height="70"
                      width="100"
                  /></span>
                  <div
                    title="金卡最高立减500+畅享一价全包·上海往返马尔代夫鲁滨逊努努岛7天5晚自由行（水屋带私人泳池+精彩晚会DJ表演+全天托儿服务+锦鲤免费升级房型/水飞上岛+可订库拉玛提岛/阿玛瑞/波杜希蒂岛/神仙珊瑚岛/奥臻岛/芙花芬岛/莫凡彼岛/尼亚玛/奥静岛）"
                    class="title"
                  >
                    金卡最高立减500+畅享一价全包·上海往...
                  </div>
                  <span class="price">¥10680起</span>
                </a>
              </li>
              <li>
                <a href="javascript:void(0);" target="_blank"
                  ><span class="image"
                    ><img
                      src="../assets/images/wKgED1xFn0SAXJ-1AAKOKgZepzM541.png"
                      height="70"
                      width="100"
                  /></span>
                  <div
                    title="北京直飞普吉岛7天自由行（端午/暑期惊喜优惠+最高立减968元+家庭/蜜月同款+屋顶/星光泳池+网红酒店/轻奢别墅任意搭+可定制曼谷/清迈多地连线+赠电话卡/VIP接送机/旅游保险）"
                    class="title"
                  >
                    北京直飞普吉岛7天自由行（端午/暑期惊...
                  </div>
                  <span class="price">¥3250起</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
     <Footer />
  </div>
</template>

<script>
import { BannersAPI, HotTravelsAPI } from "@/request/api";
import Topbar from "../components/Topbar.vue";
import Footer from "../components/Footer.vue";
export default {
  data() {
    return {
      // 轮播图
      BannersArr: [],
      // 热门和最新
      HotTravels: [],
      // 轮播图选中索引
      listIndex: 0,
      // 是否显示
      isShow:true,
      // 1 创建时间 2 阅读数
      num:1,
      // 页码数
      page:1
      
    };
  },
   components: {
    Topbar,
Footer,
  },
  async created() {
    // 请求轮播图数据
    let res1 = await BannersAPI();
    this.BannersArr = res1.data.data.filter((item) => item);
    this.setTimer();
    this.getHotTravels();
  },
  methods: {
    // 切换热门
    hotChange(){
this.isShow=true;
this.num=1;
this.getHotTravels();
    },
     // 切换最新
    newChange(){
this.isShow=false;
this.num=2;
this.getHotTravels();
    },
    // 点击选中轮播图
    changePage(index) {
      this.listIndex = index;
    },
    // 轮播图自动切换定时器
    setTimer() {
      this.timer = setInterval(() => {
        this.listIndex++;
        if (this.listIndex == this.BannersArr.length) {
          this.listIndex = 0;
        }
      }, 3000);
    },
    // 封装热门和最新数据请求
    async getHotTravels(){
    let res2 = await HotTravelsAPI({
      orderType:this.num,
      currentPage:this.page
    });
    this.HotTravels = res2.data.data.content.filter((item) => item);
    }
  },
};
</script>

<style lang="less" scoped>
a:hover {
  outline: 0;
  text-decoration: underline;
  color: #ff8a00;
}

.mfw-focus {
  position: relative;
  z-index: 20;
  margin-bottom: 20px;
  clear: both;
}

.show-slider {
  position: relative;
  overflow: hidden;
  background-color: #f1f4f5;
}

.show-slider .show-image {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 2;
}

.show-slider .show-image li.first {
  display: inline-block;
}

.show-slider .show-image li {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

.show-slider .show-image li {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.show-slider .show-image li:before {
  width: 88px;
  height: 78px;
  margin: -89px 0 0 -44px;
  background-position: -200px 0;
}

.show-slider .show-image li:after {
  width: 180px;
  height: 180px;
  margin: -140px 0 0 -90px;
  -webkit-animation: loading-photo 1s ease 0s infinite normal running;
  animation: loading-photo 1s ease 0s infinite normal running;
}

.show-slider .show-image li:after,
.show-slider .show-image li:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  background: url(../assets/images/loading-big.png) no-repeat;
}

.show-slider .show-pic {
  display: block;
  height: 100%;
}

.show-slider .show-image li img {
  width: 100%;
  margin: 0 !important;
}

.show-slider .show-title.dark {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.show-slider .show-title {
  position: absolute;
  top: 25px;
  left: 50%;
  margin-left: -500px;
  color: #fff;
  font-size: 26px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  text-align: left;
  min-width: 1000px;
}

.show-slider .show-title .date {
  position: relative;
  width: 180px;
  font-size: 24px;
  overflow: hidden;
}

.show-slider .show-title h3 {
  font-size: 26px;
  font-weight: normal;
}

.show-slider .show-title .day {
  font-size: 38px;
}

.show-slider .show-image .show-info {
  position: absolute;
  left: 50%;
  bottom: 20px;
  margin-left: -320px;
  min-width: 630px;
  font-size: 14px;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  text-align: left;
  white-space: nowrap;
}

.show-slider .show-nav {
  position: absolute;
  right: 40px;
  top: 45%;
  margin-top: -166px;
  width: 110px;
  z-index: 2;
}

.show-slider .show-nav li {
  height: 62px;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
}

.show-slider .show-nav li:first-child,
.show-slider .show-nav li:first-child span {
  border-radius: 0 5px 0 0;
}

.show-slider .show-nav .active span {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 2px solid #ff9d00;
  width: 106px;
  height: 58px;
  overflow: hidden;
}

.show-slider .show-more {
  position: absolute;
  z-index: 2;
  right: 40px;
  top: 50%;
  margin-top: 160px;
  width: 110px;
  height: 35px;
  background-image: url(../assets/images/index-sprites9.png);
  background-position: -60px -50px !important;
  line-height: 200px;
  overflow: hidden;
}

.search-container {
  position: absolute;
  bottom: 45px;
  left: 50%;
  margin-left: -320px;
  width: 632px;
  z-index: 5;
}

.search-group {
  padding: 15px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
}

.searchtab {
  margin-bottom: 7px;
  color: #fff;
  line-height: 26px;
  font-size: 14px;
}

.searchtab li {
  float: left;
  display: inline;
  margin-right: 30px;
  cursor: pointer;
}

.searchtab i {
  float: left;
  margin: 5px 5px 0 0;
  width: 16px;
  height: 16px;
  background-image: url(../assets/images/header-sprites13.png);
  background-position: -60px -110px !important;
}

.searchtab .tab-selected i {
  background-position: -60px -140px !important;
}

.searchbar {
  height: 46px;
  overflow: hidden;
}

.search-wrapper {
  float: left;
  width: 546px;
}

.search-group .search-input {
  height: 46px;
  overflow: hidden;
}

.search-group .search-input input {
  width: 504px;
  height: 46px;
  border: 0 none;
  padding: 0 21px;
  margin: 0;
  line-height: 46px;
  font-size: 16px;
  color: #666;
  border-radius: 4px;
}

.search-group .search-button {
  float: left;
  margin-left: 6px;
  width: 50px;
  height: 46px;
}

.search-group .search-button a {
  display: block;
  height: 46px;
  background-color: #ff9d00;
  border-radius: 4px;
  text-align: center;
}

.search-group .icon-search {
  display: inline-block;
  margin-top: 11px;
  width: 24px;
  height: 24px;
  background-image: url(../assets/images/header-sprites13.png);
  background-position: 0 -110px !important;
  overflow: hidden;
  vertical-align: top;
}

.mfw-container {
  width: 1000px;
  margin: 0 auto;
}

.sales-entrys-container {
  width: 100%;
  margin-bottom: 19px;
}

.sales-entrys-container a:hover,
.sales-entrys-container a:visited,
.sales-entrys-container a:link,
.sales-entrys-container a:active {
  text-decoration: none;
}

.sales-entrys-container .entrys-bg-sales {
  background-image: url(https://n2-q.mafengwo.net/s13/M00/E5/F2/wKgEaVy1QCCAei5UAAAO1FUM6kc797.png);
  color: #cd4541;
}

.sales-entrys-container .entrys-bg-group {
  background-image: url(https://p1-q.mafengwo.net/s13/M00/E4/D1/wKgEaVy1P--AVjJFAAAQMS0_1iU358.png);
  color: #87429e;
}

.sales-entrys-container .entrys-bg-localdeals {
  background-image: url(https://b3-q.mafengwo.net/s13/M00/E4/10/wKgEaVy1P9GAUbowAAAK_IDLPbA968.png);
  color: #ae503c;
}

.sales-entrys-container .entrys-bg-flight {
  background-image: url(https://b1-q.mafengwo.net/s13/M00/E5/08/wKgEaVy1P_iAfYzkAAAdot1Y3HY493.png);
  color: #3c62b9;
}

.sales-entrys-container .entrys-bg-visa {
  background-image: url(https://n1-q.mafengwo.net/s13/M00/E5/72/wKgEaVy1QAmAO9dkAAAez69iAn0483.png);
  color: #648c61;
}

.sales-entrys-container .entrys-bg-ship {
  background-image: url(https://b3-q.mafengwo.net/s13/M00/E5/A3/wKgEaVy1QBOAKQIjAAAjohve-bM990.png);
  color: #465cbe;
}

.sales-entrys-container .entrys-bg-sales,
.sales-entrys-container .entrys-bg-group,
.sales-entrys-container .entrys-bg-localdeals,
.sales-entrys-container .entrys-bg-flight,
.sales-entrys-container .entrys-bg-visa,
.sales-entrys-container .entrys-bg-ship {
  background-size: cover;
  background-repeat: no-repeat;
}

.sales-entrys-item:first-child {
  margin-left: 0;
}

.sales-entrys-item {
  float: left;
  width: 154px;
  height: 55px;
  margin-left: 8px;
  padding-top: 15px;
  padding-left: 6px;
  display: inline-block;
  border-radius: 3px;
  font-family: PingFangSC-Semibold;
  cursor: pointer;
}

.sales-entrys-item .sales-entrys-title {
  height: 22px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
}

.sales-entrys-item .sales-entrys-subtitle {
  height: 16px;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  font-family: PingFangSC-Regular;
}

.mfw-wrapper {
  float: right;
  width: 700px;
}

.mfw-aside {
  float: left;
  width: 260px;
}

.asidebox {
  margin-bottom: 30px;
}

.asidebox-hd {
  height: 35px;
  line-height: 35px;
  margin-bottom: 12px;
}

.asidebox-hd .hd-title {
  float: left;
  font-size: 18px;
  color: #333;
  font-weight: normal;
}

.asidebox-hd .hd-right {
  float: right;
  color: #999;
}

.gonglve-item {
  margin-bottom: 10px;
}

.gonglve-item .img {
  position: relative;
  height: 140px;
  margin-bottom: 10px;
}

.gonglve-item .mark {
  position: absolute;
  left: 0;
  top: 7px;
  padding: 0 6px;
  color: #fff;
  line-height: 24px;
  background-color: #ff6262;
  font-size: 12px;
}

.gonglve-item .mark:after {
  content: "";
  position: absolute;
  top: 0;
  right: -5px;
  border-top: 12px solid #ff6262;
  border-bottom: 12px solid #ff6262;
  border-right: 5px dashed transparent;
}

.gonglve-item h3 {
  margin: 10px 0 5px;
  width: 260px;
  height: 24px;
  line-height: 24px;
  font-size: 16px;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.box-gonglve h3 a {
  color: #333;
}

.mfw-travelnotes .navbar {
  margin-bottom: 20px;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e4e4;
}

.tn-nav {
  float: left;
}

.tn-write {
  float: right;
  width: 140px;
}

.tn-nav .active {
  padding-bottom: 6px;
  border-bottom: 3px solid #ff9d00;
  position: relative;
  z-index: 11;
}

.tn-nav .tn-nav-hot {
  width: 170px;
}

.tn-nav .active a {
  color: #ff9d00;
}

.tn-menu {
  display: inline-block;
  margin-left: 7px;
  line-height: 20px;
  border: 1px solid #e5e5e5;
  color: #666;
  font-size: 12px;
  padding: 0 10px 0 8px;
  cursor: pointer;
  vertical-align: 2px;
}

.tn-nav .active i {
  display: inline-block;
}

.tn-menu-icon {
  display: inline-block;
  float: left;
  margin: 6px 5px 0 0;
  width: 11px;
  height: 8px;
  background: url(../assets/images/index-sprites9.png) no-repeat 0 -130px;
}

.tn-nav .tn-nav-new {
  width: 120px;
}

.tn-nav li {
  float: left;
  width: 150px;
  display: inline;
  text-align: center;
}

.tn-nav li a {
  color: #333;
  font-size: 18px;
}

.tn-write .btn-add {
  display: block;
  height: 36px;
  background-color: #ff9d00;
  color: #fff;
  text-align: center;
  border-radius: 4px;
}

.tn-write .btn-add i {
  display: inline-block;
  margin-right: 5px;
  width: 18px;
  height: 17px;
  background-position: 0 0;
  overflow: hidden;
  vertical-align: -3px;
}

.tn-write .btn-add i,
.tn-extra .btn-ding,
.tn-extra .tn-place i,
.tn-extra .tn-nums i {
  background: url(../assets/images/index-sprites9.png) no-repeat;
}

.tn-menu:hover {
  border-color: #ff9d00;
  background-color: #ff9d00;
  color: #fff;
}

.tn-nav li a:hover {
  text-decoration: none;
  color: #ff9d00;
}

.tn-menu:hover .tn-menu-icon {
  background-position: 0 -140px;
}

.tn-dropdown-pop {
  position: absolute;
  z-index: 10;
  margin: -21px 0 0 -20px;
  width: 718px;
  padding: 2px 0;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);
}

.tn-dropdown-pop .close {
  font-family: serif, verdana, Arial, "Lucida Grande", "Microsoft Yahei",
    "Hiragino Sans GB", "Hiragino Sans GB W3", SimSun, STHeiti;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 6px;
  top: 6px;
  line-height: 14px;
  border: 1px solid #e8e8e8;
  color: #ccc;
  overflow: hidden;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  background: #fff;
  z-index: 6;
  transition: 1s ease-in-out 0s;
  -webkit-transition: 1s ease-in-out 0s;
  -moz-transition: 1s ease-in-out 0s;
  -o-transition: 1s ease-in-out 0s;
}

.tn-dropdown-pop .section {
  margin: 40px 30px;
}

.tn-dropdown-pop .section + .section {
  margin-bottom: 20px;
}

.tn-dropdown-pop .section-cont {
  margin-left: 86px;
}

.mui-search {
  width: 400px;
  position: relative;
  margin-bottom: 15px;
}

.tn-dropdown-pop .label {
  float: left;
  width: 56px;
  text-align: right;
  font-size: 16px;
  color: #333;
  line-height: 24px;
}

.tn-dropdown-pop .hot-place {
  font-size: 14px;
}

.mui-search-inp {
  width: 348px;
  padding: 0 35px 0 15px;
  border: 1px solid #efefef;
  background-color: #efefef;
  height: 38px;
  border-radius: 4px;
  line-height: 38px;
  font-size: 14px;
  vertical-align: top;
}

.tn-search-suggest {
  width: 398px;
  padding: 10px 0;
}

.m-search-suggest {
  margin-top: 6px;
  width: 546px;
  background-color: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  position: absolute;
  z-index: 2000;
  overflow: hidden;
}

.hide {
  display: none;
}

.tn-dropdown-pop .hot-place .on,
.tn-dropdown-pop .hot-place .on:hover {
  padding: 0 9px 0 12px;
  background-color: #ff9d00;
  color: #fff;
  border-radius: 13px;
}

.tn-dropdown-pop .hot-place a {
  display: inline-block;
  margin-right: 10px;
  color: #666;
}

.tn-dropdown-pop .hot-place .on:after {
  content: "";
  display: inline-block;
  margin-left: 3px;
  width: 10px;
  height: 7px;
  background: url(../assets/images/index-sprites9.png) no-repeat -120px -30px;
  vertical-align: 2px;
}

.tn-dropdown-pop .label {
  float: left;
  width: 56px;
  text-align: right;
  font-size: 16px;
  color: #333;
  line-height: 24px;
}

.tn-dropdown-pop .section-cont {
  margin-left: 86px;
}

.tn-dropdown-pop .interest-list {
  margin: 0 -10px -20px 0;
}

.tn-dropdown-pop .interest-list li {
  float: left;
  width: 260px;
  height: 75px;
  margin: 0 30px 20px 0;
  display: inline;
}

.tn-dropdown-pop .interest-list a {
  display: block;
  height: 75px;
  overflow: hidden;
  color: #333;
}

.tn-dropdown-pop .interest-list .img {
  float: left;
  width: 110px;
  height: 75px;
  margin-right: 12px;
  overflow: hidden;
  position: relative;
}

.tn-dropdown-pop .interest-list h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: normal;
}

.tn-dropdown-pop .interest-list p {
  height: 40px;
  font-size: 12px;
  line-height: 20px;
  overflow: hidden;
  color: #999;
}

.tn-selected .tn-tag {
  padding: 0 5px 0 20px;
  font-size: 14px;
  line-height: 24px;
  color: #666;
  border-radius: 13px;
}

.mfw-travelnotes .tn-tag {
  display: inline-block;
  padding: 0 14px;
  margin-right: 5px;
  line-height: 20px;
  background-color: #f6f6f6;
  border: 1px solid #e5e5e5;
  border-radius: 11px;
  font-size: 12px;
}

.tn-selected .tn-tag i {
  display: inline-block;
  margin-left: 4px;
  border: 7px solid #f6f6f6;
  width: 5px;
  height: 5px;
  background: url(../assets/images/index-sprites9.png) no-repeat -135px -30px;
  vertical-align: -4px;
  border-radius: 20%;
}

.mfw-travelnotes .tn-tag:hover {
  text-decoration: none;
  background-color: #ff9d00;
  border-color: #ff9d00;
  color: #fff;
}

.tn-selected .tn-tag:hover i {
  background-position: -145px -30px;
  border-color: #ff9d00;
}

.tn-item {
  padding: 15px 0;
  height: 150px;
}

.tn-image {
  float: left;
  width: 220px;
  height: 150px;
  position: relative;
}

.tn-image img {
  width: 220px;
  height: 150px;
}

.tn-wrapper {
  float: right;
  width: 455px;
  height: 150px;
}
.tn-wrapper .text{
-webkit-line-clamp:3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tn-item dl {
  height: 117px;
}

.tn-item dt {
  height: 26px;
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 26px;
}

.tn-item dt a {
  width: 420px;
  height: 26px;
  display: block;
  color: #333;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tn-item dd {
  line-height: 20px;
  font-size: 14px;
  overflow: hidden;
}

.tn-item dd a {
  color: #666;
}

.tn-extra {
  height: 33px;
  overflow: hidden;
  line-height: 33px;
}

.tn-extra .tn-ding {
  float: right;
  color: #ff9d00;
  font-size: 14px;
  text-align: right;
}

.tn-extra .tn-place {
  margin-right: 5px;
}

.tn-extra .tn-user {
  margin-right: 10px;
}

.tn-extra .tn-nums {
  font-size: 14px;
  color: #999;
}

.tn-extra .btn-ding {
  display: inline-block;
  float: right;
  margin-left: 8px;
  width: 38px;
  height: 33px;
  background-position: -60px 0 !important;
  overflow: hidden;
}

.tn-write .btn-add i,
.tn-extra .btn-ding,
.tn-extra .tn-place i,
.tn-extra .tn-nums i {
  background: url(../assets/images/index-sprites9.png) no-repeat;
}

.tn-extra .tn-ding em {
  font-style: normal;
}

.tn-extra span {
  display: inline-block;
}

.tn-extra .tn-place i {
  float: left;
  margin: 8px 5px 0 0;
  width: 14px;
  height: 16px;
  background-position: 0 -50px !important;
  overflow: hidden;
}

.tn-extra .tn-place a {
  color: #666;
}

.tn-extra .tn-user img {
  margin-right: 5px;
  width: 16px;
  height: 16px;
  overflow: hidden;
  border-radius: 50%;
  vertical-align: -3px;
}

.tn-extra .tn-nums i {
  float: left;
  margin: 10px 5px 0 0;
  width: 18px;
  height: 14px;
  background-position: -30px -50px !important;
}

.tn-item:hover dt a {
  color: #ff9d00;
  text-decoration: none;
}

.tn-item:hover {
  background-color: #f8f8f8;
  padding: 15px;
  margin: 0 -15px;
}

.tn-extra .tn-place a:hover {
  color: #ff9d00;
}

.tn-item dd a:hover {
  text-decoration: none;
  color: #666;
}

.show-slider .show-title:hover {
  text-decoration: none;
  color: #fff;
}

.tn-write .btn-add:hover {
  text-decoration: none;
  background-color: #ff8a00;
}

.gonglve-item h3 a:hover {
  color: #ff9d00;
}

.m-pagination {
  padding-right: 0;
}

.tn-dropdown-pop .hot-place .on,
.tn-dropdown-pop .hot-place .on:hover {
  padding: 0 9px 0 12px;
  background-color: #ff9d00;
  color: #fff;
  border-radius: 13px;
}

.tn-dropdown-pop .hot-place a:hover {
  text-decoration: none;
  color: #ff9d00;
}

.tn-dropdown-pop .interest-list a:hover {
  background-color: #f8f8f8;
  margin: -10px;
  padding: 10px;
  color: #ff9d00;
  text-decoration: none;
}

.tn-dropdown-pop .close:hover {
  border-color: #960;
  text-decoration: none;
  transform: rotate(360deg);
  transform-origin: 50% 50%;
  -webkit-transform: rotate(360deg);
  -webkit-transform-origin: 50% 50%;
  -moz-transform: rotate(360deg);
  -moz-transform-origin: 50% 50%;
  -o-transform: rotate(360deg);
  -o-transform-origin: 50% 50%;
  color: #ff9d00;
}

.m-hotsale,
.m-activity,
.m-app {
  margin-bottom: 30px;
}

.hd {
  margin-bottom: 18px;
  font-size: 18px;
  color: #333;
  font-weight: normal;
}

.m-hotsale li {
  margin-bottom: 20px;
}

.m-hotsale li a {
  display: block;
  padding-left: 110px;
  height: 70px;
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}

.m-hotsale li a:hover {
  text-decoration: none;
}

.m-hotsale .image {
  float: left;
  margin-left: -110px;
  width: 100px;
  height: 70px;
  overflow: hidden;
}

.m-hotsale .title {
  height: 40px;
  margin-bottom: 12px;
}

.m-hotsale .price {
  color: #ff9d00;
}

.m-hotsale li a:hover .title {
  color: #ff9d00;
}

@media (max-width: 1440px) {
  .show-slider .show-title {
    top: 15px;
    font-size: 20px;
  }
  .show-slider .show-title .date {
    font-size: 20px;
  }
  .show-slider .show-title h3 {
    font-size: 20px;
  }
  .show-slider .show-title .day {
    font-size: 30px;
  }
  .show-slider .show-image .show-info {
    margin-left: -269px;
  }
  .search-container {
    bottom: 54px;
    width: 538px;
    margin-left: -269px;
  }
  .search-group {
    padding: 10px;
  }
  .searchtab li {
    margin-right: 20px;
  }
  .searchbar,
  .search-wrapper,
  .search-group .search-input,
  .search-group .search-input input {
    height: 36px;
  }
  .search-wrapper {
    width: 474px;
  }
  .search-group .search-input input {
    width: 444px;
    padding: 0 10px 0 20px;
    font-size: 14px;
    line-height: 36px;
  }
  .search-group .search-button {
    margin-left: 4px;
    width: 40px;
    height: 36px;
  }
  .search-group .search-button a {
    height: 36px;
  }
  .search-group .icon-search {
    margin-top: 6px;
  }
}
.jq-pagination {
    height: 30px;
    margin: 10px 0;

}
.jq-pagination a {
    text-decoration: none;
    border: aliceblue;
    color: #333;
    height: 24px !important;
    border-radius: 4px;
}
.jq-pagination a {
    height: 24px !important;
    display: block;
    float: left;
    padding: 0 10px;
    text-align: center;
    line-height: 24px;

}
.jq-pagination .active {
    background-color: #ff9d00;
    color: #fff;
    padding: 0 10px;
}
.jq-pagination .prev {
    background-color: #ff9d00;
}
.jq-pagination .next {
    background-color: #ff9d00;
    border-left-width: 0;
    border-right-width: 1px;
}
.jq-pagination .active.prev,
.jq-pagination .active.next {
    color: #dcdcdc;
    background: #fff;
}
.jq-pagination a:hover {
    background-color: #cde4f8;
}
.jq-pagination .active:hover {
    background-color: #6babdd;
}
.jq-pagination a.disabled {
    display: none;
}
</style>